<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@ include file="../include/taglib.jsp"%>

<%
response.setHeader("Cache-Control","no-store");
response.setHeader("Pragrma","no-cache");
response.setDateHeader("Expires",0);

Long resid = Long.parseLong(request.getParameter("id"));

%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>history-event-common</title>
<%@ include file="../include/common.jsp"%>
<%@ include file="../include/table.jsp"%>
<%@ include file="../include/jbox.jsp"%>

<link rel="stylesheet"  type="text/css" href="${pageContext.request.contextPath}/style/default/select/jquery.multiselect.css" />
<link rel="stylesheet"  type="text/css" href="${pageContext.request.contextPath}/style/default/jqueryui/jquery-ui.css" />

<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/calendar/zh_CN_WdatePicker.js"></script>
	
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery/jquery-ui.min.js"></script>
	
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/select/jquery.multiselect.min.js"></script>
	

<style>
table.display td {
	white-space: nowrap;
    text-overflow:ellipsis;
    overflow: hidden;    
}

</style>

<script type="text/javascript">
	
	var dim=0;
    var tableId = 10;
	//执行查询操作
	function query() {

		//$('.display tr th').remove();
		
		//如果没有选择指标  也返回
		var propIds = $('#propids').multiselect("widget").find('input:checked');
		
		if (propIds.length == 0) {
			return false;
		}
		
		//数据维度
		var dimen = $('#dimension').find('option:selected').val();
		
		//时间区间
		var timeSection = $('#fixtime').attr('value');
		
		var beginDate = '';//$('#beginDate').val();
		var endDate = '';//$('#endDate').val();
		if(timeSection ==4){
			if(dimen == 0){
				beginDate = $('#beginDate').val();
				endDate=$('#endDate').val();
				if(beginDate==''||endDate==''){
					return false;
				}
			}else{
				beginDate = $('#beginDate2').val();
				endDate=$('#endDate2').val();
				if(beginDate==''||endDate==''){
					return false;
				}
			}
			
		}
		
		$('#saveBt').attr("disabled", true).text("查询中");
		
		//先删除之前的表格
		$('.removetable').remove();
		$('body')
				.append(
						'<div class="removetable"><table width="98%" cellpadding="0" cellspacing="0" border="0" id='+tableId+' class="display"><thead><tr></tr></thead></table></div>');
		//新建表格
		var ids = '';
		var jsonStr
		if(dimen == 0){
		    jsonStr = "[{\"mDataProp\":\"time\"},";
			$('.display tr').append('<th class="time" width="90px">采集时间</th>');
			propIds.each(
					function() {
						var vals = $(this).val().split(",");
						ids += vals[0] + ",";
						jsonStr += "{\"mDataProp\":\"" + vals[0]+ "\"},";
						$('.display tr').append('<th >' +vals[1] + '</th>');
			});
		}
		if(dimen ==1 || dimen ==2){
			jsonStr = "[{\"mDataProp\":\"time\"},";
			$('.display tr').append('<th rowspan="2" class="time" width="90px">采集时间</th>');
			propIds.each(function(){
				var vals = $(this).val().split(",");
				$('.display tr').append('<th colspan="3" > ' + vals[1]+ '</th>');
			});
			$('.display thead').append('<tr class="trsecond"> </tr>');
			
			propIds.each(
					function(i,index) {
						var vals = $(this).val().split(",");
						ids += vals[0] + ",";
						jsonStr += "{\"mDataProp\":\"" + vals[0]+ "_AVG\"},";
						jsonStr += "{\"mDataProp\":\"" + vals[0]+ "_MAX\"},";
						jsonStr += "{\"mDataProp\":\"" + vals[0]+ "_MIN\"},";
						$('.display .trsecond').append('<th>Avg</th>');
						$('.display .trsecond').append('<th>Max</th>');
						$('.display .trsecond').append('<th>Min</th>');
			});
		}
		
		ids = ids.substring(0, ids.length - 1);
		jsonStr = jsonStr.substring(0, jsonStr.length - 1) + "]";
		var json = eval('(' + jsonStr + ')');
		if(dimen == 0){
			$('#' + tableId)
			.dataTable(
					{
						"bProcessing" : true,
						"bServerSide" : true,
						"sServerMethod" : 'POST',
						"sAjaxSource" : '${pageContext.request.contextPath}/performance/prop-query!queryProp.action',
						"bPaginate" : true,
						"bSort" : true,
						//"bAutoWidth":true,
						//"bRetrieve":true,
						"bDestroy" : true,
						"bFilter" : false,
						"bJQueryUI" : false,
						"sScrollX" : '100%',
						"sPaginationType" : "full_numbers",
						"sDom" : 'rt <"bottom"flpi>',
						"aLengthMenu" : [ [ 10, 30, 50, 100 ],
								[ 10, 30, 50, 100 ] ],
						"aoColumns" : json,
						"oLanguage" : {
			 				"sLengthMenu": "每页 _MENU_ 条",
			 		 		"sZeroRecords": "没有找到记录",
							"sInfo": "当前从 _START_ 到 _END_ 条,共 _TOTAL_ 条记录", 
							"sInfoEmpty": "",
							"oPaginate":{"sFirst":"首页","sPrevious":"上一页","sNext":"下一页","sLast":"尾页"}	
						},
						"fnServerParams":function(aoData){
							aoData.push({'name':'resId','value':'<%=resid %>'});
							aoData.push({'name':'propIds','value':ids});
							aoData.push({'name':'dimen','value':dimen});
							aoData.push({'name':'timeSection','value':timeSection});
							aoData.push({'name':'beginDate','value':beginDate});
							aoData.push({'name':'endDate','value':endDate});
						},
						"fnInitComplete":function(oSettings){
							$('#saveBt').attr("disabled", false).text("查询");
						}
					});
		}
		
		if(dimen ==1 || dimen ==2){
			$('#' + tableId)
			.dataTable(
					{
						"bProcessing" : true,
						//"bAutoWidth":true,
						"bServerSide" : true,
						"sServerMethod" : 'POST',
						"sAjaxSource" : '${pageContext.request.contextPath}/performance/prop-query!queryProp.action',
						"bPaginate" : true,
						"bSort" : true,
						//"bRetrieve":true,
						"bDestroy" : true,
						"bFilter" : false,
						"bJQueryUI" : false,
						"sScrollX" : '100%',
						"sPaginationType" : "full_numbers",
						"sDom" : 'rt <"bottom"flpi>',
						"aLengthMenu" : [ [ 10, 30, 50, 100 ],
								[ 10, 30, 50, 100 ] ],
						"aoColumns" : json,
						"aoColumnDefs":[
										{ "bVisible": true, "aTargets": [3] }
							],
						"oLanguage" : {
							"sLengthMenu": "每页 _MENU_ 条",
			 		 		"sZeroRecords": "没有找到记录",
							"sInfo": "当前从 _START_ 到 _END_ 条,共 _TOTAL_ 条记录", 
							"sInfoEmpty": "",
							"oPaginate":{"sFirst":"首页","sPrevious":"上一页","sNext":"下一页","sLast":"尾页"}	
						},
						"fnServerParams":function(aoData){
							aoData.push({'name':'resId','value':'<%=resid %>'});
							aoData.push({'name':'propIds','value':ids});
							aoData.push({'name':'dimen','value':dimen});
							aoData.push({'name':'timeSection','value':timeSection});
							aoData.push({'name':'beginDate','value':beginDate});
							aoData.push({'name':'endDate','value':endDate});
						},
						"fnInitComplete":function(oSettings){
							$('#saveBt').attr("disabled", false).text("查询");
						}
					});
		    }
		
		//var oTable = $('#' + tableId).dataTable();
		//oTable.fnPageChange("first", true);
		tableId += 1;
	}
	
	

	$(function() {
		$.ajax({
			url : '${pageContext.request.contextPath}/performance/prop-query!getPropList.action', // 
			type : 'POST',
			dataType : "json",
			data : {
				resId : <%=resid %>,
				type:'1'
			},
			success : function(data) {
				var cnt = 0;
				$.each(data, function(i, index) {
					if(cnt<2){
						$('#propids').append('<option  value='+index.id+','+index.name+' selected="selected">' + index.name+ '</option> ');
					}else{
						$('#propids').append('<option  value='+index.id+','+index.name+'>' + index.name+ '</option> ');
					}
					cnt +=1;
				});
				
				$('#propids').multiselect({
					   tips:'提示:建议不要一次选择过多指标! ',
					   selectedList: 2
				});
				$('#saveBt').click();
			}
		});
	});
	
	//导出性能数据
	function propExport(){
		var resId = <%=resid %>;
        var propIds = $('#propids').multiselect("widget").find('input:checked');
		if (propIds.length == 0) {
			return false;
		}
		//数据维度
		var dimen = $('#dimension').find('option:selected').val();
		//时间区间
		var timeSection = $('#fixtime').attr('value');
		var beginDate = '';//$('#beginDate').val();
		var endDate = '';//$('#endDate').val();
		if(timeSection ==4){
			if(dimen == 0){
				beginDate = $('#beginDate').val();
				endDate=$('#endDate').val();
				if(beginDate==''||endDate==''){
					return false;
				}
			}else{
				beginDate = $('#beginDate2').val();
				endDate=$('#endDate2').val();
				if(beginDate==''||endDate==''){
					return false;
				}
			}
		}
		
		var ids = '';
		propIds.each(function(i,index) {
			var vals = $(this).val().split(",");
			ids += vals[0] + ",";
		});
		ids = ids.substring(0, ids.length - 1);
		
		window.location="${pageContext.request.contextPath}/performance/property-export!doExport.action?resId="+resId+"&propIds="+ids+"&dimen="+dimen
				+"&timeSection="+timeSection+"&beginDate="+beginDate+"&endDate="+endDate;
	}
	
	
	//改变时间维度
	function changedimen(){
		var dimN = $('#dimension').find('option:selected').val();
		if(dimN==dim||(dim>0&&dimN>0)){
			
		}else{
			dim=dimN;
			if( dimN==0){
			    $('#dayData').hide();
			  	$('#houseData').show();
			  	initDate();
				$('#propselect select').remove();
				$('#propselect').append('<select id="propids" name="propids" multiple="multiple" size="1"  class="select" style="width:450px; height:22px; text-align:center;" >  </select>');
				$.ajax({
					url : 'prop-query!getPropList.action', // 
					type : 'POST',
					dataType : "json",
					data : {
						resId : <%=resid %>,
						type:'1'
					},
					success : function(data) {
						var cnt = 0;
						$.each(data, function(i, index) {
							if(cnt<2){
								$('#propids').append('<option value='+index.id+','+index.name+' selected="selected">' + index.name+ '</option> ');
							}else{
								$('#propids').append('<option value='+index.id+','+index.name+'>' + index.name+ '</option> ');
							}
							cnt +=1;
						});
						
						$('#propids').multiselect({
							   selectedList: 2
						});
						$('#saveBt').click();
					}
				});
			}else{
			 	$('#dayData').show();
			  	$('#houseData').hide();
			  	initDate();
				$('#propselect select').remove();
				$('#propselect').append('<select id="propids" name="propids" multiple="multiple" size="1"  class="select" style="width:450px; height:22px; text-align:center;" >  </select>');
				$.ajax({
					url : 'prop-query!getPropList.action', // 
					type : 'POST',
					dataType : "json",
					data : {
						resId : <%=resid %>,
						type:'2'
					},
					success : function(data) {
						var cnt = 0;
						$.each(data, function(i, index) {
							if(cnt<2){
								$('#propids').append('<option value='+index.id+','+index.name+' selected="selected">' + index.name+ '</option> ');
							}else{
								$('#propids').append('<option value='+index.id+','+index.name+'>' + index.name+ '</option> ');
							}
							cnt +=1;
						});
						
						$('#propids').multiselect({
							   selectedList: 2
						});
						$('#saveBt').click();
					}
				});
			}
		}
		
		$('#saveBt').click();
	}

	
	//改变时间范围
	function changetime(){
		var timeSection = $('#fixtime').attr('value');
		if(timeSection !=4){
			$('#countScope').css('display','none')
			$('#saveBt').click();
		}else{
			$('#countScope').css('display','');
			initDate();
		}
	}
	
	function add_zero(temp)
	{
		 if(temp<10) 
		 		return "0"+temp;
		 else 
		 		return temp;
	}
	
	
	function initDate(){
		var currentDate =new Date();
		//赋默认值
		if($('#dimension').val()== 0){
			$('#beginDate').val(currentDate.getFullYear()+"-"+add_zero(currentDate.getMonth()+1)+"-"+add_zero(currentDate.getDate())+" 00");
 			$('#endDate').val(currentDate.getFullYear()+"-"+add_zero(currentDate.getMonth()+1)+"-"+add_zero(currentDate.getDate())+" "+add_zero(currentDate.getHours())+"");
		}else{
			$('#beginDate2').val(currentDate.getFullYear()+"-"+add_zero(currentDate.getMonth()+1)+"-"+add_zero(currentDate.getDate()));
 			$('#endDate2').val(currentDate.getFullYear()+"-"+add_zero(currentDate.getMonth()+1)+"-"+add_zero(currentDate.getDate()));
		}
	}
</script>
</head>
<body style="width:100%;height:98%;">

 <div class="searchFormStyle">
	       <div style="width:100%;">
		       	<div style="float:left;width:auto;">
		    	<span><label >数据维度：</label></span>
			    	<span style="padding-left:0px;"><select id="dimension" name="dimension" class="select" style="width:90px;  text-align:center;" onchange="changedimen();">  
		    			<option value="0" >原始数据</option>
		    			<option value="1" >时汇聚数据 </option>
		    			<option value="2" >日汇聚数据</option>
		    		</select>
		    		</span>
		    	</div>
			    <div style="float:left;width:auto;margin-left:10px;">
			    	<label>时间范围：</label>
			    	<select id="fixtime" name="fixtime" class="select" style="width:90px;;text-align:center;" onchange="changetime();">  
			    			<option value="0" >今天 </option>
			    			<option value="1" >昨天 </option>
			    			<option value="2" >本周  </option>
			    			<option value="3" >本月 </option>
			    			<option value="4" >自定义 </option>
		    		 </select>
		        </div>
		        
			    <div style="float:left;width:auto;margin-left:10px;display:none" id="countScope">
				   <span id="houseData">
			   			<input id="beginDate" name="beginDate" class="Wdate" type="text" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH ',maxDate:'%y-%M-%d %H',readOnly:true})"/>
						<label>-</label>
						<input id="endDate" name="endDate" class="Wdate" type="text" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH ',maxDate:'%y-%M-%d %H',minDate:$('#beginDate').val(),readOnly:true})"/>
		   		   </span>
		   		   
		   		   <span id="dayData" style="display: none;">
			   		   	 <input id="beginDate2" name="beginDate2" class="Wdate" type="text" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-%d',readOnly:true})"/>
						 <label>-</label>
						 <input id="endDate2" name="endDate2" class="Wdate" type="text" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-%d',minDate:$('#beginDate2').val(),readOnly:true})"/>
		   		   </span>
		   		   
			    </div>
	      </div>
	      
	      <div style="clear:both;margin-top:5px; margin-bottom:5px;">
		      	<span style="padding-left:4px;">选择指标：</span>
		      	<span style="margin-left:-2px;" id="propselect">
		      	   <select id="propids" name="propids" multiple="multiple" size="1"  class="select" style="width:450px; height:22px; text-align:center;" >  </select>
		      	</span>
		      	<span style="width: 50px"></span>
		      	<span>
		      		<button type="button" id="saveBt" value="查询" class="btn-4" onclick="query();">查询</button>
		      		<button type="button" id="saveBt" value="导出" class="btn-4" onclick="propExport();">导出</button>
		      	</span>
		      	<span style="width: 10px"></span>
	      </div>
    </div>
    
    
	<div class="removetable">
		<table width="100%" cellpadding="0" cellspacing="0" border="0" class="display"
			id="propList">
			<thead>
			    <tr>
				</tr>
			</thead>
		</table>
	</div>

</body>
</html>